<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ViewComponent</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 
        1.一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
        2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。
    -->

    <div id="app">
        <student></student>
    </div>
</body>
<script>
     const student = Vue.extend({
        template:`
        <div>
            <h3>学生名称:{{name}}</h3>
            <h3>学生年龄:{{age}}</h3>
            <button @click="ShowMessage">确认</button>
        </div>
        `,
        //组件的data不能配置对象，考虑到复用的关系，多个组件引用同一个对象会造成显示同步，所以只能配置函数返回对象
        data(){
            return {
                name:'徐方君',
                age:29
            }
        },
        methods: {
            ShowMessage(){
                console.log(this);
            }
        },
    })
    

    


    var vm = new Vue({
       el:'#app',
       data:{
           Name:'张三',
       },
       components:{
            student:student
       }
    })

    //注意： 这里Component组件需要用Vue.extend来生成 不能直接用{}来配置，否则不行
    console.log(student.prototype.__proto__ === Vue.prototype);
</script>
</html>